<template>
  <div class="left-chart-2">
      <div id="line-chart"></div>
  </div>
</template>

<script>
export default {
  name: 'LeftChart2',
  data () {
    return {
      option: {
        // backgroundColor: '#061326',
        legend: {
          show: true,
          icon: 'circle',
          top: 20,
          right: 20,
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 30,
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [
            '7月1日',
            '7月2日',
            '7月3日',
            '7月4日',
            '7月5日',
            '7月6日',
            '7月7日'
          ],
          axisLine: {
            lineStyle: {
              color: '#1bb3d5'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1bb3d5',
              lineWidth: 0.5
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#1bb3d5'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1bb3d5',
              lineWidth: 0.5
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          }
        },
        series: [{
          name: '从业人员人数',
          type: 'line',
          data: [13, 10, 3, 12, 15, 30, 7],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#4aebf0'
          },
          itemStyle: {
            normal: {
              color: '#4aebf0',
              borderColor: '#4aebf0'
            }
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#4aebf0'
            },
            {
              offset: 1,
              color: '#4aebf0'
            }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: '#4aebf0'
                },
                {
                  offset: 0.4,
                  color: '#4aebf0'
                },
                {
                  offset: 0.5,
                  color: '#fff'
                }, {
                  offset: 0.7,
                  color: '#fff'
                }, {
                  offset: 0.8,
                  color: '#fff'
                }, {
                  offset: 1,
                  color: '#fff'
                }]
              },
              borderColor: '#4aebf0',
              borderWidth: 2
            }
          }
        }, {
          name: '监管活跃人数',
          type: 'line',
          data: [5, 12, 11, 4, 25, 16, 1],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#a27638'
          },
          itemStyle: {
            normal: {
              color: '#a27638',
              borderColor: '#a27638'
            }
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#a27638'
            },
            {
              offset: 1,
              color: '#a27638'
            }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: '#a27638'
                }, {
                  offset: 0.4,
                  color: '#a27638'
                }, {
                  offset: 0.5,
                  color: '#fff'
                }, {
                  offset: 0.7,
                  color: '#fff'
                }, {
                  offset: 0.8,
                  color: '#fff'
                }, {
                  offset: 1,
                  color: '#fff'
                }]
              },
              borderColor: '#a27638',
              borderWidth: 2
            }
          }
        }]
      }
    }
  },
  mounted () {
    let chart = this.$echarts.init(document.getElementById('line-chart'))
    chart.setOption(this.option)
  }
}
</script>

<style lang="less" scoped>
.left-chart-2 {
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;

  #line-chart {
    width: 100%;
    height: calc(~"100% - 0px");
  }
}
</style>
